<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" >

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加管理员信息</legend>
</fieldset>
<form class="layui-form" action="" id="form_admin">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">管理员名</label>
            <div class="layui-input-inline">
                <input type="hidden" name="op" value="add"   autocomplete="off" class="layui-input">
                <input id="aname" type="text" name="aname"   autocomplete="off" class="layui-input" lay-verify="aname">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input id="atel" type="tel" name="atel" lay-verify="required|phone" autocomplete="off"    class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="role">
                    <option value="超级管理员">超级管理员</option>
                    <option value="普通管理员" selected=""> 普通管理员</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">

            <div class="layui-input-inline">
                <button  id="addadmin" type="submit" class="layui-btn" lay-submit="" lay-filter="add">增加</button>
            </div>
        </div>
    </div>

</form>









<div style="margin-top: 20px;height: 1000px;border-top: 1px solid gainsboro;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>

    </script>
</div>

<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['table','form'], function(){
        var table = layui.table , $ = layui.jquery, form=layui.form;

        var tableIns =table.render({
            elem: '#test'
            ,url: '../../admin?op=findPage'
            ,title:'管理员数据表'
            ,cols: [[

                {type:'checkbox' }
                ,{field:'ano', width:120, title: 'ID', sort: true, unresize:true}
                ,{field:'aname', width:100, title: '用户名',width:120,edit: 'text'}

                ,{field:'atel', title:'手机号',   edit: 'text', templet: function(res){

                        return '<em>'+ res.atel +'</em>'
                    }}

                ,{field:'role', title: '角色', width: 100,edit: 'text',sort: true}


                , {field: 'right', title:'操作', toolbar: '#barDemo', width:150}


            ]]
            ,page: {
                limits:[2,3,4,10],
                limit:2,
                groups:5,
                first:'首页',
                last:'尾页'

            }
        });

        //监听行工具事件
        table.on('tool(test)',function (obj) {

            var data = obj.data;
            if(obj.event == 'del'){

                //发送请求到后端,修改状态
                let ano = data.ano;
                $.get("../../admin?op=delete",{ano:ano},function (rs) {
                    if(rs> 0){
                        alert("删除成功！");
                        tableIns.reload();//修改成功后，需要重新加载表格中数据
                    }
                    else{
                        alert("删除失败！");
                    }



                },'json');

            }

        });


        //自定义验证规则
        form.verify({
            aname: function (value) {
                if(value.length < 2){
                    return '账号至少得2个字符啊';
                }
                //发送请求到后台,单前账号是否已添加
            }
        });


        // //监听提交
        form.on('submit(add)',function (data) {
            var obj = JSON.stringify(data.field);
            console.log(obj);
            $.post("../../admin",data.field,function (rs) {

                if(rs.code == 200){
                    //重置表单
                    $("#form_admin")[0].reset();

                    layui.form.render();
                    tableIns.reload(); //修改成功后，需要重新加载表格中数据
                }
                else{
                    layui.msg(rs.msg);
                }

            },"json");
            return false;  //阻止表单提交,采用ajax提交


        });







    });
</script>
</body>
</html>
